<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	<script type="text/javascript">
		var cal=function(x){
			var num1=document.getElementById("num1").value;
			var num2=document.getElementById("num2").value;
			document.getElementById("res").value=eval(num1+x+num2);
			if(isNaN(num1)||isNaN(num2)){
				alert("数字不合法");
				return;
			}

		}
	</script>
	</head>
	<body>
	
			<div>第一个数<input type="text" name="" id="num1" value="" /></div><br>
			<div>第二个数<input type="text" name="" id="num2" value="" /></div><br>
		
		<button onclick="cal('+')" id="btn1">+</button>
		<button onclick="cal('-')" class="btn2">-</button>
		<button onclick="cal('*')" name="btn3">*</button>
		<button onclick="cal('/')">/</button><br>
		
		<div>计算结果<input type="text" name="" id="res" value="" /></div><br>
		<script type="text/javascript">
			
			var btn1=document.getElementById("btn1");
			console.log(btn1);
			btn1.innerHTML="+"
			var btn2=document.getElementsByClassName("btn2")[0];//数组
			console.log(btn2);
			var btn3=document.getElementsByName("btn3")[0];//数组
			console.log(btn3);
			var btn4=document.querySelector(".btn2+button+button");//相邻兄弟
			console.log(btn4);
		
			
			
			
		</script>
	</body>
</html>
